<template>
  <div id="Tabbar">
    <van-tabbar  route>
      <van-tabbar-item :to="item.to" v-for="item in TabbarData" :key="item.title">
        <span>{{item.title}}</span>
        <template #icon="props">
          <img :src="props.active ? item.icon.active : item.icon.inactive"/>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant'
export default {
  components: {
    'van-tabbar': Tabbar,
    'van-tabbar-item': TabbarItem
  },
  data() {
    return {
      TabbarData: [
        {
          title: '首页',//标题
          to:'/',//跳转路由
          icon: {
            active: require ('@/assets/icons/ic_tab1_sel.png'),  // 选中图片
            inactive: require('@/assets/icons/ic_tab1_nor.png') // 未选中图片
          }
        },
        {
          title: '行情',
          to:"/quotation",
          icon: {
           active: require ('@/assets/icons/ic_tab2_sel.png'),
            inactive: require('@/assets/icons/ic_tab2_nor.png') 
          }
        },
        {
          title: '交易',
          to:"/market",
          icon: {
            active: require ('@/assets/icons/ic_tab3_sel.png'),
            inactive: require('@/assets/icons/ic_tab3_nor.png') 
          }
        },
        {
          title: '资产',
          to:'/property',
          icon: {
            active: require ('@/assets/icons/ic_tab4_sel.png'),
            inactive: require('@/assets/icons/ic_tab4_nor.png') 
          }
        },
        {
          title: '我的',
          to:"/personal",
          icon: {
           active: require ('@/assets/icons/ic_tab5_sel.png'),
            inactive: require('@/assets/icons/ic_tab5_nor.png') 
          }
        }
      ]
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped></style>
